<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>跨域及其解决方案</title>
	</head>
	<body>
		<script>
			//解决跨域问题
			// jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，
			//     发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中,
			//     返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
			//jsonp的缺点：只能发送get一种请求。

			//2.跨域资源共享（CORS）
			// CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
			// 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
			// CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
			//   浏览器将CORS跨域请求分为简单请求和非简单请求。
			//   只要同时满足一下两个条件，就属于简单请求
			// (1)使用下列方法之一：
			// head
			// get
			// post
			// (2)请求的Heder是
			// Accept
			// Accept-Language
			// Content-Language
			// Content-Type: 只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain
			//  简单请求
			//  对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段
            // 非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
            // 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
            //             3、nginx代理跨域
            //             1nginx配置解决iconfont跨域
            //             浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，
            //             此时可在nginx的静态资源服务器中加入以下配置。
            //             2nginx反向代理接口跨域
            //             跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。
            // 4、nodejs中间件代理跨域
            // 1非vue框架的跨域
            //   使用node + express + http-proxy-middleware搭建一个proxy服务器。
            // vue框架的跨域
            //  2 node + vue + webpack + webpack-dev-server搭建的项目，跨域请求接口，直接修改webpack.config.js配置。开发环境下，
            // vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域。
            //5、document.domain + iframe跨域
            // 此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
            // 6location.hash + iframe跨域
            //  实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
            // 7window.name + iframe跨域
            // window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）
            //8、postMessage跨域
            //  postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
            // 页面和其打开的新窗口的数据传递
            // 多窗口之间消息传递
            // 页面与嵌套的iframe消息传递
            // 上面三个场景的跨域数据传递
            //9 WebSocket协议跨域
            // WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
            // 原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。






		</script>
	</body>
</html   
